<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Report Email Template</title>
    <style>
        body,
        table,
        td,
        a {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .email-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .header {
            background-color: #64da91;
            color: #ffffff;
            text-align: center;
            padding: 30px 20px;
            position: relative;
        }

        .header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 600;
        }

        .avatar {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 2px solid #4CAF50;
            overflow: hidden;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .content {
            padding: 20px;
            color: #333333;
        }

        .content-block {
            display: table;
            width: 100%;
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            background-color: #f9f9f9;
        }

        .left-block,
        .right-block {
            display: table-cell;
            vertical-align: top;
            width: 50%;
            padding: 15px;
        }

        .right-block {
            border-left: 1px solid #e0e0e0;
        }

        .content-block h2 {
            font-size: 22px;
            margin-top: 0;
            color: #4CAF50;
            font-weight: 600;
        }

        .content-block p {
            font-size: 16px;
            line-height: 1.6;
            margin: 10px 0;
            color: #555555;
        }

        .footer {
            background-color: #f1f1f1;
            text-align: center;
            padding: 20px;
            font-size: 14px;
            color: #777777;
            border-top: 1px solid #e0e0e0;
        }

        .button {
            display: inline-block;
            background-color: #FF9800;
            color: #ffffff;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 25px;
            margin-top: 10px;
            font-size: 16px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #F57C00;
        }

        .chart-placeholder {
            width: 100%;
            min-height: 150px;
            text-align: center;
        }

        .chart-placeholder img {
            width: 100%;
            max-width: 200px;
        }

        @media screen and (max-width: 600px) {
            .content-block {
                display: block;
            }

            .left-block,
            .right-block {
                display: block;
                width: 100%;
                padding: 10px;
                border: none;
            }

            .right-block {
                border-top: 1px solid #e0e0e0;
            }
        }
    </style>
</head>

<body>
    <div class="email-container">
        <div class="header">
            <div class="avatar">
                <img src="https://via.placeholder.com/60" alt="User Avatar">
            </div>
            <h1>健康管理日报-{yyyy-MM-dd}</h1>
        </div>
        <div class="content">
            <div class="content-block">
                <div class="left-block">
                    <div class="chart-placeholder">
                        <img src="https://via.placeholder.com/200x150" alt="ECharts Graph">
                    </div>
                </div>
                <div class="right-block">
                    <h2>睡眠：{x}分</h2>
                    <p>
                        <strong>睡眠时长：{时间}</strong><br>
                        - 深睡：{时长}<br>
                        - 浅睡：{时长}<br>
                        - 快速眼动：{时长}<br>
                        <strong>- Tips：{建议}</strong>
                    </p>
                </div>
            </div>
            <div class="content-block">
                <div class="left-block">
                    <div class="chart-placeholder">
                        <img src="https://via.placeholder.com/200x150" alt="ECharts Graph">
                    </div>
                </div>
                <div class="right-block">
                    <h2>昨日运动步数</h2>
                    <p>
                        目标步数: <strong>{步数}</strong><br>
                        运动步数: <strong>{实际步数}</strong><br>
                        Tips: <strong>{建议}</strong>
                    </p>
                </div>
            </div>
            <div class="content-block">
                <div class="left-block">
                    <div class="chart-placeholder">
                        <img src="https://via.placeholder.com/200x150" alt="ECharts Graph">
                    </div>
                </div>
                <div class="right-block">
                    <h2>血压</h2>
                    <p>
                        Total Sales: <strong>$10,000</strong><br>
                        New Customers: <strong>50</strong><br>
                        Top Selling Product: <strong>Product A</strong>
                    </p>
                </div>
            </div>
            <div class="content-block">
                <div class="left-block">
                    <div class="chart-placeholder">
                        <img src="https://via.placeholder.com/200x150" alt="ECharts Graph">
                    </div>
                </div>
                <div class="right-block">
                    <h2>体重</h2>
                    <p>
                        Total Sales: <strong>$10,000</strong><br>
                        New Customers: <strong>50</strong><br>
                        Top Selling Product: <strong>Product A</strong>
                    </p>
                </div>
            </div>
            <div class="content-block">
                <div style="width: 100%; text-align: center;">
                    <h2>Next Steps</h2>
                    <p>To view the full report, click the button below:</p>
                    <a href="#" class="button">View Full Report</a>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>&copy; 2023 Your Company. All rights reserved.</p>
            <p>If you did not sign up for this service, please ignore this email.</p>
        </div>
    </div>
</body>

</html>